<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <ul>
        <li class="user">
          <div class="left">
            <img
              src="./../../../assets/form/images/touxiang_03.jpg"
              alt="touxiang"
            />
          </div>
          <div class="info">
            <div class="hang">
              {{ serviceInfo.zhicheng }}
              {{ serviceInfo.name }}
            </div>
            <div class="hang">
              工号
              {{ serviceInfo.gonghao }}
            </div>
            <div class="hang">
              <div class="icon">
                <img
                  src="./../../../assets/form/images/star_03.jpg"
                  alt="touxiang"
                />
                {{ serviceInfo.xingji }}
              </div>

              <div class="icon">
                <img
                  src="./../../../assets/form/images/coin_03.jpg"
                  alt="touxiang"
                />
                {{ serviceInfo.jinbi }}
              </div>
            </div>
          </div>
        </li>
        <li class="person">
          <el-form
            class="personForm"
            ref="person"
            :model="person"
            :rules="rules"
          >
            <el-form-item class="rate" label="装维人员评价" prop="value">
              <el-rate
                v-model="person.value"
                show-text
                :texts="texts"
              ></el-rate>
            </el-form-item>
            <el-form-item class="radio" label="上门小调查">
              <el-radio v-model="person.onsite" label="1">有上门</el-radio>
              <el-radio v-model="person.onsite" label="2">未上门</el-radio>
            </el-form-item>
            <el-form-item
              class="myCheckboxButton"
              v-if="person.onsite == '1'"
              prop="pingjia"
            >
              <el-checkbox-group v-model="person.pingjia" fill="#2885e7">
                <el-checkbox-button
                  v-for="item in haoping"
                  :label="item"
                  :key="item"
                  >{{ item }}</el-checkbox-button
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              class="myCheckboxButton"
              v-if="person.onsite == '2'"
              prop="pingjia"
            >
              <el-checkbox-group v-model="person.pingjia" fill="#2885e7">
                <el-checkbox-button
                  v-for="item in weishangmen"
                  :label="item"
                  :key="item"
                  >{{ item }}</el-checkbox-button
                >
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </li>
        <li class="service">
          <el-form
            class="serviceForm"
            ref="service"
            :model="service"
            :rules="rules"
          >
            <el-form-item class="rate" label="装维服务评价" prop="value">
              <el-rate
                v-model="service.value"
                show-text
                :texts="texts"
              ></el-rate>
            </el-form-item>
            <el-form-item class="myCheckboxButton" prop="pingjia">
              <el-checkbox-group v-model="service.pingjia" fill="#2885e7">
                <el-checkbox-button
                  v-for="item in servicePingjia"
                  :label="item"
                  :key="item"
                  >{{ item }}</el-checkbox-button
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item class="textBox">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="您的满意是我们不竭的动力"
                v-model="service.zixiePingjia"
                maxlength="30"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>
      <button @click="submit">提交</button>
    </div>
  </div>
</template>
<script>
import BScroll from "@better-scroll/core";
export default {
  name: "pingceForm",
  props: ["serviceInfo"],
  data() {
    return {
      // btnDisable: false,
      texts: ["不满意", "不满意", "一般", "非常满意", "非常满意"],
      haoping: ["上门守时", "态度好", "很专业", "速度杠杠滴"],
      weishangmen: ["未上门自己不需要", "未安装（装维人员不愿意）"],
      servicePingjia: [
        "申请/报障渠道方便",
        "申请/报障过程简便",
        "响应快",
        "问题已解决，体验好",
      ],
      person: {
        value: 0,
        onsite: "1",
        pingjia: ["上门守时"],
      },
      service: {
        value: 0,
        pingjia: [],
        zixiePingjia: "",
      },

      rules: {
        value: [{ required: true, validator: this.validateRate }],
        pingjia: [{ required: true, validator: this.validatePingjia }],
      },
    };
  },
  mounted() {
    let bs = new BScroll(this.$refs.wrapper, {
      movable: true,
      zoom: true,
      click: true,
      bounce: {
        top: true,
        bottom: true,
      },
    });
  },
  methods: {
    // showPingjia() {
    //   console.log(this.person.pingjia);
    // },
    validatePingjia(rule, value, callback) {
      if (value == undefined || value.length <= 0) {
        // console.log(value);
        return callback(new Error("请为我们的服务做出评价！"));
      } else {
        // console.log(value);
        callback();
      }
    },
    validateRate(rule, value, callback) {
      if (!value) {
        // console.log(value);
        return callback(new Error("请为我们评级！"));
      } else {
        callback();
      }
    },
    // disabledButton() {
    //   if (
    //     this.person.value != 0 &&
    //     this.person.pingjia &&
    //     this.service.value != 0 &&
    //     this.service.pingjia
    //   ) {
    //     return false;
    //   } else {
    //     return true;
    //   }
    // },
    submit() {
      this.$refs.person.validate((valid) => {
        if (valid) {
          this.$refs.service.validate((va) => {
            if (va) {
              console.log("person");
              console.log(this.person);
              console.log("service");
              console.log(this.service);
              console.log("submit success!");
              // 向后台发送请求
            } else {
              console.log("serviceError");
            }
          });
        } else {
          //就像用户提示发生错误的消息
        }
      });
    },
  },
};
</script>

<style lang="stylus">
.el-checkbox-group
  display flex
  flex-direction row
  flex-wrap wrap
  justify-content space-between
  width 12.4rem
.myCheckboxButton .el-checkbox-button__original
  display none
.myCheckboxButton .el-checkbox-button__inner
  display inline-block
  padding-left 0.5rem
  padding-right 0.5rem
  min-width 2.8rem !important
  height 1.3rem
  border 0.01rem solid #dcdcdc
  border-radius 0.2rem
  line-height 1.3rem
  text-align center
</style>
<style lang="stylus" scoped>
.wrapper
  overflow hidden
  position fixed
  top 2.6rem
  bottom 1.8rem
  width 100% /* height: 32rem; */
  .content
    position relative
    width 100%
    height 33rem
    background-image url('./../../../assets/form/images/content.jpg')
    background-size 100% 100%
    ul
      position absolute
      top 7.2rem
      left 0.48rem
      width 13.6rem
      li
        margin-bottom 0.4rem
        display flex
        align-items center
        width 100%
        border 0.2rem solid #148cfe
        border-radius 0.4rem
        background-color #fff
      .user
        height 4.2rem
        .left
          margin 0.5rem 0.5rem
          width 3rem
          height 3rem
        .info
          display flex
          flex-direction column
          justify-content space-around
          margin-left 0.8rem
          width 6rem
          height 3rem
          .hang
            display flex
            align-items center
            font-size 0.6rem
            text-align left
            .icon
              display flex
              align-items center
              margin-right 1.2rem
              width 0.8rem
              height 0.8rem
      .person
        height 7.2rem
        font-size 0.7rem
        .personForm
          display flex
          flex-direction column
          justify-content space-around
          width 100%
          height 100%
          margin-left 0.8rem
          margin-right 0.6rem
          .rate
            display flex
            align-items center
            height 1.5rem
            margin-top 0.7rem
            margin-bottom 0
            border-bottom 0.01rem solid #dcdcdc
          .radio
            margin-bottom 0
          .myCheckboxButton
            margin-bottom 0.7rem
      .service
        height 8.6rem
        font-size 0.7rem
        .serviceForm
          display flex
          flex-direction column
          justify-content space-around
          width 100%
          height 100%
          margin-left 0.8rem
          margin-right 0.6rem
          .rate
            display flex
            align-items center
            height 1.5rem
            margin-top 0.7rem
            margin-bottom 0
            border-bottom 0.01rem solid #dcdcdc
    button
      position absolute
      left 1.4rem
      bottom 1rem
      height 1.8rem
      width 12rem
      border-radius 1.8rem
      background-color #ffd348
      color #99610e
      font-weight 1000
</style>